<template>
    <div class="mine">
        <h2>饿了么</h2>
        <div class="top">
            <img src="../../assets/logo.png" alt="" class="photo">
            <div class="middle">
                <div class="name">7a9aa5a077a</div>
                <p class="phone">{{phone}}</p>
            </div>
            <button class="bto">用户设置</button>
        </div>
        <div class="pic">
            <div class="one">
                <p class="chk">吃货卡</p>
                <span class="chd">吃货豆：1461</span>
            </div>
            <div class="two">
                <div class="pack">
                    <span class="iconfont icon-hongbao"></span>
                    <span class="packs">红包</span>
                    <p class="dead">7张今天到期</p>
                </div>
                <div class="last">
                    <span class="inconfont icon-yue"></span>
                    <span class="lasts">余额</span>
                    <p class="nono">0%</p>
                </div>
            </div>
        </div>
        <div class="use">
            <h3>常用工具</h3>
            <div class="bottom">
                <div class="fir">
                    <span class="iconfont icon-wodedizhi"></span>
                    <p class="aun">我的地址</p>
                </div>
                <div class="fir">
                    <span class="iconfont icon-wodedizhi"></span>
                    <p class="aun">我的客服</p>
                </div>
                <div class="fir">
                    <span class="iconfont icon-wodedizhi"></span>
                    <p class="aun">店铺关注</p>
                </div>
                <div class="fir">
                    <span class="iconfont icon-wodedizhi"></span>
                    <p class="aun">评价有礼</p>
                </div>
            </div>
        </div>
        <div class="none">
            <div class="run">
                <h4>邀请好友赚现金</h4>
                <p class="pop">最高得15元</p>
                <img src="../../assets/8.png" alt="">
                <button class="btt">去邀请</button>
                <button class="btf">查佣金</button>
            </div>
            <div class="run">
                <h4>饿了么服务号</h4>
                <p class="pop">关注后及时接收系统通知</p>
                <img src="../../assets/9.png" alt="">
                <!-- <button class="btt">去邀请</button> -->
                <button class="bts">立即关注</button>
            </div>
        </div>
    </div>
</template>

<script>
import {user_login} from '../../api'
export default {
    data(){
        return {
            phone:0,
        }
    },
    mounted(){
        user_login({phone:15291695373,pass:1234}).then((res)=>{
            console.log(res.data);
            this.phone = res.data.userinfo.phone
            // console.log(this.list);
        })
    },
}
</script>

<style scoped>
    .mine {
        width: 100%;
        height: 620px;
        position: fixed;
        top: 0;
        background-color: powderblue;
    }
    h2 {
        width: 100%;
        height: 30px;
        margin-left: 10px;
    }
    .top {
        width: 100%;
        height: 100px;
        display: flex;
        /* background-color: antiquewhite; */
    }
    .photo {
        width: 100px;
        height: 100px;
        display: block;
        margin-left: 10px;
        border-radius: 50%;
    }
    .middle {
        width: 200px;
        height: 100%;
    }
    .phone {
        color: #ccc ;
        margin-top: 20px;
        font-size: 14px;
    }
    .name {
        margin-top: 20px;
        font-weight: bolder;
    }
    .bto {
        width: 100px;
        height: 30px;
        display: block;
        margin-top: 30px;
        border-radius: 20px;
        margin-right: 10px;
        border:1px solid #ccc;
    }
    .pic {
        width: 355px;
        /* height: 200px; */
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .one {
        /* width: 335px; */
        height: 80px;
        width: 100%;
        display: flex;
        background-color: blue;
        color: white;
        border-radius: 5px;

    }
    .chk {
        font-size: 30px;
        margin-right: 20px;
        margin-left: 10px;
    }
    .chd {
        line-height: 30px;
    }
    .two {
        width: 100%;
        height: 70px;
        margin-top: 10px;
        border-radius: 10px;
        display: flex;
        /* background-color: antiquewhite; */
        background-color: aliceblue;
        overflow: hidden;
    }
    .pack,
    .last {
        width: 50%;
        text-align: center;
    }
    .dead,
    .none {
        margin-top: 10px;
    }
    .icon-hongbao,
    .icon-yue  {
        display: inline-block;
        margin-top: 10px;
    }
    .packs,
    .lasts {
        display: inline-block;
        margin-top: 10px;
    }
    .use {
        width: 355px;
        height: 100px;
        margin-left: 10px;
        margin-right: 10px;
        /* background-color: #ccc; */
        background-color: aliceblue;
        border-radius: 5px;

    }
    h3 {
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin-left: 10px;
    }
    .bottom {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        text-align: center;
    }
    .none {
        width: 355px;
        height: 150px;
        margin-left: 10px;
        margin-right: 10px;
        /* background-color: #ccc; */
        background-color: aliceblue;
        border-radius: 5px;
        display: flex;
        justify-content: space-around;
    }
    .run {
        width: 49%;
        height: 100%;
        border-radius: 10px;
        border: 1px solid black;
        font-size: 14px;
    }
    h4 {
        height: 20px;
        /* text-align: center; */
    }
    .run img {
        display: block;
        margin:10px  auto;
    }
    .btt {
        width: 50px;
        height: 30px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius:  10px;
        display: inline-block;
        margin-left: 10px;
    }
    .btf {
        width: 50px;
        height: 30px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius:  10px;
        display: inline-block;
        margin-left: 40px;
    }
    .bts {
        width: 70px;
        height: 30px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius:  10px;
        display: block;
        margin:auto;
    }
</style>